<template>
    <div class="trans-content">
        <div class="main">
            <el-row class="TransactionCount">
                <el-col :span="6">
                    <div class="internal border-right">
                        <el-row class="hpx-label">累计成交</el-row>
                        <el-row>
                            <span class="hpx-red-tips count">{{data.total_trade_price}}</span>
                            <span class="unit">万</span>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="internal border-right">
                        <el-row class="hpx-label">上一工作日成交</el-row>
                        <el-row>
                            <span class="hpx-red-tips count">{{data.yesterday_order_number}} </span><span class="unit">笔</span>
                            <span class="hpx-red-tips count">{{data.yesterday_trade_price}} </span><span class="unit">万</span>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="internal">
                        <el-row class="hpx-label">今日实时成交</el-row>
                        <el-row>
                            <span class="hpx-red-tips count">{{data.today_order_number}} </span><span class="unit">笔</span>
                            <span class="hpx-red-tips count">{{data.today_trade_price}} </span><span class="unit">万</span>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="6">
                    <a href="market.html">
                        <el-button type="primary" round class="toMarket">
                            进入企企商城 <i class="iconfont icon-gengduo1"></i>
                        </el-button>
                    </a>
                </el-col>
            </el-row>
            <el-row class="websiteNotice">
                <span class="block_title"><i class="iconfont icon-gonggao"></i> 网站公告：</span>
                <span class="notice hpx-label" v-for="item in noticeData" :key="item.id" @click="jumpPage(item.connect)">{{item.title}}</span>
                <a href="/guide/news/" target="_blank">
                    <el-button type="text" size="small" class="more_btn">查看更多  <i class="iconfont icon-chakangengduo"></i></el-button>
                </a>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator';

    @Component
    export default class TransactionCount extends Vue {
        @Prop() data !:any
        @Prop() noticeData !:any

        jumpPage (link) {
            window.open(link)
        }
    }
</script>

<style lang="scss" scoped>
    .trans-content{
        height: 150px;
        border-radius: 8px;
        box-shadow: 4px 4px 20px rgba(28, 31, 51, 0.1);
        .main{
            .websiteNotice{
                width: 1140px;
                margin: 0 auto;
                height: 50px;
                line-height: 50px;
                font-size: 14px;
                border-top: 1px solid $__color-line;
                box-sizing: border-box;
                // padding: 0 30px;
                .block_title{
                    color: $__color-primary;
                }
                .notice{
                    margin-right: 60px;
                    cursor: pointer;
                }
                .more_btn{
                    float: right;
                    color: $__color-link;
                    margin-top: 8px;
                    font-size: 14px;
                    .icon-gengduo1:before{
                        font-size: 12px;
                    }
                }
            }
            .TransactionCount{
                height: 100px;
                .internal{
                    margin: 10px auto;
                    height: 80px;
                    box-sizing: border-box;
                    font-size: 16px;
                    padding-left: 50px;
                    .el-row:first-child{
                        height: 22px;
                        margin-bottom: 12px;
                    }
                    .count{
                        font-size: 30px;
                    }
                    .unit{
                        @extend .hpx-font-weight;
                        color: $__color-show;
                        font-size: 18px;
                    }
                }
                .border-right{
                    border-right: 1px solid $__color-line;
                }
                .toMarket{
                    display: block;
                    margin-top: 20px;
                    float: right;
                    margin-right: 30px;
                    width: 222px;
                    height: 60px;
                    font-size: 20px;
                    border-radius: 50px;
                    // background:linear-gradient(270deg,rgba(178,36,239,1) 0%,rgba(117,121,255,1) 100%);
                    box-shadow:5px 5px 20px 0px rgba(72,17,203,0.6);
                    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(178,36,239,1)), color-stop(100%, rgba(117,121,255,1))); /* Chrome, Safari 4+ */
                    background-image: -webkit-linear-gradient(270deg,rgba(178,36,239,1) 0%, rgba(117,121,255,1) 100%); /* Chrome 10+, Safari 5.1+ */    
                    background-image: -moz-linear-gradient(270deg,rgba(178,36,239,1) 0%, rgba(117,121,255,1) 100%); /* Fx 3.6+ */   
                    background-image: linear-gradient(270deg,rgba(178,36,239,1) 0%, rgba(117,121,255,1) 100%); /* W3C */
                    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='rgba(178,36,239,1)', endColorstr='rgba(117,121,255,1)')";
                    border: none;
                    a{
                        color: #fff;
                    }
                }
            }
        }
    }
</style>